<template>
<!-- 优惠券 -->
    <div class="Lo_voucher">
        <header class="Lo_voucher01_header">
        <!-- 返回跳转 -->
            <p @click='Lo_voucher_back' class="Lo_voucher_back"><img src="../../../static/imgs/return.png"/></p>
            <p>代金券</p>
        <!-- 跳转优惠券详情 -->
            <router-link tag='span' to='Lo_vo_ins'>
                 <p class="Lo_vo_ins"><img src="../../../static/imgs/Lo_vouther01_img01.png"/></p>
            </router-link>
        </header>
        <main class="Lo_voucher01_main">
            <section class="Lo_voucher01_section01">
                <p><img src="../../../static/imgs/Lo_vouther01_img02.png"/></p>
                <p>您还没有代金券</p>
                <router-link tag='span' to='Lo_vo_ins'>
                    <p class="Lo_vo_to_ins sd">如何获得代金券</p>
                </router-link>
            </section>
        </main>  

    </div>
</template>
<script>
    export default {
            name:'Lo_voucher',
            methods:{
            Lo_voucher_back:function(){
                this.$router.go(-1)
            }
        }
    }

</script>
<style scoped lang='less'>
.PxToRem(@name, @px){
@{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}

.Lo_voucher01_header{
    .PxToRem(height,88);
    .PxToRem(font-size,35);
    .Flex;
    justify-content: space-between;
    align-items: center;
   background: url(../../../static/imgs/Reg_serve_bg01.jpg);
    position: fixed;
    /*padding-left: 2%;*/
    top: 0;
    width: 100%;
    border-bottom: 1px solid #e6e6e6;
    p:nth-child(1){
        flex: 1;
        img{
            .PxToRem(width,55);
            .PxToRem(height,53);
        }
    }
    p:nth-child(2){
        flex: 6;
    }
    p:nth-child(3){
        flex: 1;
        img{
            .PxToRem(width,55);
            .PxToRem(height,53);
        }
    }
}
.Lo_voucher01_main{
    width: 100%;
    background: #f0f2f5;
    .Flex;
    justify-content: center;
    .PxToRem(padding-top,88);
    text-align:center;
    position: fixed;
    bottom: 0;
    .PxToRem(top,88);
    .Lo_voucher01_section01{
    margin-top: 50%;
        p:nth-child(1){
            img{
            .PxToRem(width,283);
            .PxToRem(height,173);
                }
        }
        p:nth-child(2){
            .PxToRem(font-size,44);
            color: #202021;
            .PxToRem(margin-top,95);
            .PxToRem(margin-bottom,135);
        }
        .sd{
            .PxToRem(font-size,32);
            color: #1cc6a3;
        }
    }
}
 

</style>













